<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>进阶使用</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" href="../../css/marked_css.css" />
		<link rel="stylesheet" href="../../css/obsidian-theme.css">
		<link rel="stylesheet" href="../../css/element_UI.css">
		<link rel="stylesheet" href="../../css/public-nav-tructure.css">
		<script src="../../javaScript/vue.js"></script>
		<script src="../../javaScript/jquery-3.4.1.js"></script>
		<script src="../../javaScript/marked.min.js"></script>
		<script src="../../javaScript/prettify.js"></script>
		<script src="../../javaScript/element_UI.js"></script>
		<script src="../../javaScript/clipboard.min.js"></script>
		<script src="../../javaScript/cp.js"></script>
	</head>
	<body>
		<div id="app">
			<!-- markedDown -->
			<div class="marked-box">
				<el-row>
					<el-col :span="5">
						<!-- 左侧导航 -->
						<div class="marked-nav-box">
							<el-menu :default-active="activeIndex" class="el-menu-demo" mode="vertical" @select="horizontal">
								<el-submenu index="key" v-for="(value, key, index) in fist_nav" :key="index" :index="key">
									<template slot="title">{{key}}</template>
									<el-menu-item index="item" v-for="item in fist_nav[key]" :index="item">
										<img src="../../images/function.png" alt="" class="nav-item-icon" v-if="!/^[\u4E00-\u9FA5]+$/.test(item)">
										<img src="../../images/table.png" alt="" class="nav-item-icon" v-else>
										{{item}}
									</el-menu-item>
								</el-submenu>
							</el-menu>
						</div>
					</el-col>
					<el-col :span="19">
						<!-- 中间内容 -->
						<div class="marked-content-box" v-html="md"></div>
					</el-col>
				</el-row>
			</div>
		</div>
		<script type="text/javascript">
			new Vue({
				el: '#app',
				data() {
					return {
						activeIndex: "userLogin方法",
						md: null,
						fist_nav: {},
						file_value: {}
					}
				},
				created() {
					var that = this;
					// 数据分段，导航生成
					that.get_ajax("../../md/advanced_use/进阶使用.md");
					// 检测是否有传入数据
					var date = that.get_frame_url();
					if (date) {that.activeIndex = date;};
				},
				// 生命周期钩子-挂载后执行
				mounted() {
					var that = this;
					that.this_ajax(that.activeIndex);
				},
				methods:{
					// 导航按钮点击
					horizontal(key) {
						var that = this;
						console.log(key);
						that.this_ajax(key);
					},
					get_ajax(src){
						var that = this;
						$.ajax({
							type: "get",
							url: src,
							dataType: "html",
							async: false,
							success: function(res){
								var str = marked.parse(res);
								let regex = /<h1 id=.*?>(.*?)h1>/sg;
								let regex_t = /<h2 id=.*?>((.*?))h2>/sg;
								var content = str.split('\n');
								var key = '';
								var key_t = '';
								var value_content = []
								for (row in content){
									var value = content[row].match(regex);
									var value_t = content[row].match(regex_t);
									if (value) {
										key = value[0].replace(/<.*?>/g,'')
										that.fist_nav[key] = [];
										continue;
									} else if (value_t) {
										key_t = value_t[0].replace(/<.*?>/g,'');
										that.fist_nav[key].push(key_t);
										value_content = []
									}
									value_content.push(content[row])
									that.file_value[key_t] = value_content.join("\n")
								}
							}
						});
					},
					this_ajax(key) {
						var that = this;
						var reg = new RegExp("<pre", "g");
						var content = that.file_value[key];
						that.md = content.replace(reg, "<pre class='prettyprint linenums'");
						$(function(){
							var copy_text_array = [];
							var pres = $("pre");
							if (pres.length) {
								pres.each(function() {
									var that = this;
									var copy_text = $(that).find("code").text();
									copy_text_array.push(copy_text)
								})
							}
							prettyPrint();
							$.fn.copy_init(copy_text_array);
						})
					},
					get_frame_url() {
						var reg = new RegExp("[^\?&]?" + encodeURI(name) + "=[^&]+");
						var arr = window.parent.document.getElementById("Ateon-SetParent-iframe").contentWindow.location.search.match(reg);
						if (arr != null) {
							return decodeURI(arr[0].substring(arr[0].search("=") + 1));
						};
						return "";
					}
				}
			})
		</script>
	</body>

</html>